<template>
  <div class="todo-container">
    <div class="todo-wrap">
      <Header :addTodo="addTodo"/>
      <List :todos="todos" :deleteTodo="deleteTodo" :updataTodo="updataTodo"/>
      <Footer :todos="todos" :checkAll="checkAll" :clearAllCompletedTodos="clearAllCompletedTodos"/>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs, watch} from 'vue';
// 引入直接的子级组件
import Header from './components/Header.vue';
import List from './components/List.vue';
import Footer from './components/Footer.vue';
import {Todo} from './types/todo'
import {saveTodos,readTodos} from './utils/localStorageUtils'

export default defineComponent({
  name: 'App',
  components:{
    Header,
    List,
    Footer
  },
  // 数据应该用数组来存储，数组中的每个数据都是一个对象，对象中应该有三个属性（id，title，isCompleted）
  // 把数组暂存且定义在App.vue父级组件
  setup(){
    // 定义一个数组数据
    const state=reactive<{todos:Todo []}>({
      todos:[]
    })
    // 页面加载完毕后读取数据
    onMounted(()=>{
      setTimeout(()=>{
        state.todos=readTodos()
      },1000)
    })
    // 添加数据的方法
    const addTodo=(todo:Todo)=>{
      state.todos.unshift(todo)
    }
    // 删除数据的方法
    const deleteTodo=(index:number)=>{
      state.todos.splice(index,1)
    }
    // 修改isCompleted的方法
    const updataTodo=(todo:Todo,isCompleted:boolean)=>{
      todo.isCompleted=isCompleted
      console.log(todo);
    }
    // 全选或全不选的方法
    const checkAll=(isCompleted:boolean)=>{
      state.todos.forEach((todo)=>{
        todo.isCompleted=isCompleted
      })
    }
    // 清理所有选中
    const clearAllCompletedTodos=()=>{
      state.todos=state.todos.filter(todo=>!todo.isCompleted)
    }
    // 监视操作，如果todos的数组变化了，直接存储到浏览器的缓存中
    watch(()=> state.todos,saveTodos,{deep:true})

    return{
      ...toRefs(state),
      addTodo,
      deleteTodo,
      updataTodo,
      checkAll,
      clearAllCompletedTodos
    }
  }
});
</script>
<style scoped>
.todo-container{
  width: 600px;
  margin: 0 auto;
}
.todo-container .todo-wrap{
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
</style>